<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 16:45:01
-->
<template>
  <div class="orderDetails">
    <el-page-header @back="goBack" content="工单详情"></el-page-header>
    <el-col :span="24"> <div class="order_header">工单信息</div></el-col>
    <div class="order_content">
      <el-form label-width="150px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工单id：">
              {{ order.id }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报修原因：">
              {{ order.bill_why }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程id：">
              {{ order.engineer_id }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名字：">
              {{ order.engineer_name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备id：">
              {{ order.device_id }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称：">
              {{ order.device_name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报修时间：">
              {{ order.create_time | fmtTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间：">
              {{ order.finish_time | fmtTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工单状态：">
              {{ order.status }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单类型：">
              {{ order.type }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item label="报修图片：">
            <img
              class="imgs"
              v-for="(item, index) in order.begin_photos"
              :key="index"
              :src="item"
              alt="报修图片丢失"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="完成图片：">
            <img
              class="imgs"
              v-for="(item, index) in order.end_photos"
              :key="index"
              :src="item"
              alt="维修回传图片丢失"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  date() {
    return {
      order: {},
    };
  },
  methods: {
    //返回事件()
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.order = this.$route.query;
  },
};
</script>
<style>
.order_header {
  height: 40px;
  line-height: 40px;
  background: #cdcdcd;
  color: egb(100, 99, 99);
  font-size: 18px;
  border-radius: 3px;
  padding-left: 1em;
}
.imgs {
  width: 300px;
  height: 300px;
  display: inline-block;
  padding-left: 10px;
}
</style>